import React, { useState } from 'react';
import { message } from 'antd';
import { history } from 'umi';
import axios from 'axios';
import '../public.less';

import { Form, Input, Button, Toast, NavBar } from 'antd-mobile';

export default function Login() {
  const [checked, setChecked] = useState(false);
  function skip() {
    history.push('/register');
  }
  function back() {
    history.goBack(-1);
  }

  function checkhandle(e: any) {
    setChecked(e);
  }
  async function onFinish(values: any) {
    if (checked === true) {
      const data = await axios.post('/api/users/userLogin', values);
      console.log(data.data, '55555555555555555');
      if (data.data.code == 200) {
        sessionStorage.setItem('token', JSON.stringify(data.data.token));
        let obj = {
          ...data.data.user,
          nickname: data.data.user.nickname + data.data.user._id,
        };
        sessionStorage.setItem('userdata', JSON.stringify(obj));
        // let obj = {
        //   token: data.data.token,
        //   ...data.data.user,
        //   nickname: data.data.user.nickname + data.data.user._id,
        // };

        // localStorage.setItem('token', JSON.stringify(obj));
        history.push('/hello/home');
      } else {
        message.error(data.data.msg);
      }
    } else {
      Toast.show({ content: '请同意并勾选服务协议' });
    }
  }
  return (
    <div className="login-box">
      <div className="topTitle">
        <NavBar onBack={back}>登录</NavBar>
        {/* <div className="boxs">
          <h2>登录</h2>
        </div> */}
      </div>
      <div className="face">
        <img src={require('./images/face.png')} alt="" width="35%" />
        <p>LOGIN</p>
      </div>
      <Form
        style={{ marginTop: '1rem' }}
        layout="horizontal"
        onFinish={onFinish}
        footer={
          <Button
            block
            type="submit"
            color="primary"
            size="large"
            style={{
              background: '#FE723D',
              border: '0px',
              marginTop: '0.3rem',
            }}
          >
            登录
          </Button>
        }
      >
        <Form.Item
          name="phone"
          label="手机号"
          rules={[
            {
              pattern:
                /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
              required: true,
              message: '请输入正确的手机号',
            },
          ]}
        >
          <Input onChange={console.log} placeholder="请输入手机号" />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[
            {
              pattern: /^[a-z][0-9]{5}$/,
              required: true,
              message: '请输入正确的密码',
            },
          ]}
        >
          <Input onChange={console.log} placeholder="请输入密码" />
        </Form.Item>
      </Form>
      <div className="password">
        <p>忘记密码</p>
        <p onClick={() => skip()}>去注册</p>
      </div>

      <div className="check">
        <input
          type="checkbox"
          checked={checked}
          onChange={(e) => checkhandle(e.target.checked)}
        />
        <a href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201703241622_61002.html?spm=a2107.1.0.0.15c54265byUT94">
          &nbsp; &nbsp; &nbsp; &nbsp;我同意并遵守
          <span style={{ color: '#FE723D' }}>《使用协议》、《隐私政策》</span>
        </a>
      </div>
    </div>
  );
}
